<script setup lang="ts">
//这里编写ts代码
import { reactive } from 'vue'
//1.自动推导，推导出来的类型和想要的保持一致
const form = reactive({
  username: '',
  password: ''
})
form.username = '100'
//2.显示注解变量的类型，这种适用推导不出来我们想要的类型
type Form1 = {
  username: string
  password: string
  isAgree?: boolean
}
const form1:Form1 = reactive({
  username: '100',
  password: ''
})
form1.password = '300'
form1.isAgree = true
//问题：标注reactive函数类型，可以满足下图所示数据格式的赋值操作，其中gender为选填字段
// {
//   username: 'jack',
//   address: '北京市朝阳北路',
//   phone: '13211111111',
//   gender: '男'
// }
type Form2 = {
  username: string
  address: string
  phone: string
  gender?: string
}
const form2:Form2 = reactive({
  username: 'jack',
  address: '北京市朝阳北路',
  phone: '13211111111'
})
form2.gender = '男'
</script>

<template>
  <div>
    开始写vue和ts
  </div>
</template>

<style scoped>

</style>
